<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
	<meta name="format-detection" content="telephone=no, email=no"/>
	<meta charset="UTF-8">
	<title>购物车</title>
	<link rel="stylesheet" href="themes/css/core.css">
	<link rel="stylesheet" href="themes/css/icon.css">
	<link rel="stylesheet" href="themes/css/home.css">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	<link href="iTunesArtwork@2x.png" sizes="114x114" rel="apple-touch-icon-precomposed">
	<style>
		.del{
			font-size:5px;
		}
	</style>
</head>
<body>
<div id="el">
	<header class="aui-header-default aui-header-fixed ">
		<a href="javascript:history.back(-1)" class="aui-header-item">
			<i class="aui-icon aui-icon-back"></i>
		</a>
		<div class="aui-header-center aui-header-center-clear">
			<div class="aui-header-center-logo">
				<!--购物车商品数量-->
				<div class="">购物车</div>
			</div>
		</div>
		<a href="#" class="aui-header-item-icon"   style="min-width:0">
			<i class="aui-icon aui-icon-member"></i>
		</a>
	</header>
	<section class="aui-car-content">
		<div class="aui-dri"></div>
		<div class="aui-car-box">
			<!--循环遍历店铺，并获取每一个店铺中的购物车商品-->
			<div v-for="bu in business">
				<div class="aui-car-box-name">
					<!--<input type="checkbox" class="check goods-check shopCheck">-->
					<h3>
						<!--商店展示-->
						<a href="#" v-text="bu.business_name"></a>
					</h3>
					<div class="aui-car-coupons">
						<!--<a href="#">领券</a>-->
					</div>
				</div>
				<!--商品列表-->
				<div class="aui-car-box-list" v-for="pro in product" >
					<!--遍历所有商品，将商品的店铺id和循环内的店铺id进行匹配-->
					<ul v-if="pro.business_id==bu.business_id">
						<li>
							<div class="aui-car-box-list-item">
								<input type="hidden" :value="pro.product_id">
								<input type="checkbox" class="check goods-check goodsCheck">
								<div class="aui-car-box-list-img">
									<a href="javascript:" @click="toProduct(pro.product_id)" >
										<img :src="pro.product_img" alt="">
									</a>
								</div>
								<div class="aui-car-box-list-text">
									<h4>
										<a href="javascript:" @click="toProduct(pro.product_id)" v-text="pro.product_desc"></a>
									</h4>
									<div class="aui-car-box-list-text-brief">
										<span>原封未拆</span>
										<span>店铺直销</span>
										<span>7天无理由退货！</span>
									</div>
									<div class="aui-car-box-list-text-price">
										<div class="aui-car-box-list-text-pri">
											￥<b class="price" v-text="pro.promotion_price"></b>
										</div>
										<div class="aui-car-box-list-text-arithmetic" style="float: right;margin-right: 30px">

											<a href="javascript:;" class="minus prev" >-</a>
											<span class="num" v-text="pro.product_num"></span>
											<a href="javascript:;" class="plus next" >+</a>
											<input type="hidden" :value="pro.product_id"/>
											&nbsp;&nbsp;&nbsp;
											<a href="javascript:"><span class="del" @click="delProduct(pro.shoppingcar_id)">删除</span></a>
										</div>
									</div>
								</div>

							</div>
							<div class="aui-dri"></div>
						</li>
					</ul>
				</div>
			</div>


			<div class="aui-shopPrice">
				总计：￥
				<span class="aui-total-amount ShopTotal"></span>
			</div>
		</div>
	</section>
	<div class="aui-payment-bar">
		<div class="all-checkbox"><input type="checkbox" class="check goods-check" id="AllCheck">全选</div>
		<div class="shop-total">
			<strong>合计：<i class="total" id="AllTotal"></i></strong>
		</div>
		<a href="javascript:" class="settlement" @click="toOrder()">去结算</a>
	</div>
</div>
	<script src="themes/js/jquery.min.js"></script>
	<script src="themes/js/aui-car.js"></script>
	<script src="themes/js/vue.js"></script>
<script type="text/javascript" >
	//自己写的内容
	var vue = new Vue({
		el:"#el",
		data:{
			business:[],
			product:[],
		},
		created:function(){
			this.init();
		},
		methods:{
			init:function(){
				var _this = this;
				//店铺
				$.ajax({
					type:"get",
					url:"/ShoppingMallCar/getBusinessByUserId",
					dataType:"json",
					success:function(da){
						// alert(da.li[0].business_name);
						_this.business = da.li;
					}
				});
				//商品
				$.ajax({
					type:"get",
					url:"/ShoppingMallCar/getProductByUserId",
					dataType:"json",
					success:function(da){
						// alert(da.li[1 ].product_desc);
						_this.product = da.li;
					}
				});
			},
			toProduct:function (dat) {
				location.href="ui-product.html?productId="+dat;
			},
			//////////////////////////////////////////////////////////////////////////////////////////////
			//跳转创建订单的界面，将选中的商铺数组存入到session中，订单界面进行渲染，之后创建总订单、子订单、订单项。
			toOrder:function () {
				var goodsChecks = $(".goodsCheck");
				var checks = new Array();
				for(var i = 0;i < goodsChecks.length;i++){
					if($(goodsChecks[i]).prop("checked")){
						checks.push($(goodsChecks[i]).prev().val());
					}
				}
				//传输数组进行存储
				if(checks.length>0){
					$.ajax({
						type:"get",
						url:"/ShoppingMallOrder/getChecks",
						//来指定参数序列化时，不做深度序列化(以便往后端发送数组数据)
						traditional:true,
						data:{"checks":checks},
						success:function(data){
							location.href="order.html";
						}
					});
				}else{
					alert("没有选中的商品哦~~");
				}



			},
			//删除购物车中的商品
			delProduct:function (shoppingcarId) {
				if(confirm("确认删除？")){
					//删除
					$.ajax({
						type:"get",
						url:"/ShoppingMallCar/deleteCarProduct",
						//来指定参数序列化时，不做深度序列化(以便往后端发送数组数据)
						data:{"shoppingcarId":shoppingcarId},
						success:function(data){
							location.href="car.html";
						}
					});
				}else{
					//不删除
				}
			}

		},
	});
	//修改商品数量：包括前端和数据库
	$("body").on("click",".prev",function(){
		if($(this).next().text() > 1){
			var num = $(this).next().text()-1;
			var productId = $(this).next().next().next().val();
			$(this).next().text(num);
			//改变数据库商品数量
			$.ajax({
				type:"get",
				url:"/ShoppingMallCar/updateProductNum",
				dataType:"json",
				data:{"productNum":num,"productId":productId},
				success:function(da){

				}
			});
			gettotal();
		}
	});
	$("body").on("click",".next",function(){
		var num = parseInt($(this).prev().text())+1;
		var productId = $(this).next().val();
		$(this).prev().text(num);
		//改变数据库商品数量
		$.ajax({
			type:"get",
			url:"/ShoppingMallCar/updateProductNum",
			dataType:"json",
			data:{"productNum":num,"productId":productId},
			success:function(da){

			}
		});
		gettotal();
	});
	//总价问题
	$("body").on("click",".goodsCheck",function(){
		gettotal();
	});
	$("body").on("click","#AllCheck",function(){
		gettotal();
	});
	function gettotal() {
		//总价
		var total = 0;
		//商品数量
		var num = 0;
		// alert($(this).prop("checked"));
		var goodsChecks = $(".goodsCheck");
		for(var i = 0;i < goodsChecks.length;i++){
			if($(goodsChecks[i]).prop("checked")){
				num = $(goodsChecks[i]).next().next().children().eq(2).children().eq(1).children().eq(1).text();
				total += parseFloat($(goodsChecks[i]).next().next().children().eq(2).children().eq(0).children().eq(0).text())*parseInt(num);
			}
		}
		// alert(total.toFixed(1));
		$(".ShopTotal").text(total.toFixed(2));
		$("#AllTotal").text(total.toFixed(2));
	}
</script>


</body>
</html>